<template>
  <div class="voteAdd">
    <myheader title="添加社区投票" rightBtn="发布投票" @updataInfo="voteAdd"></myheader>
    <div class="vote_div">
      <!-- 标题 -->
      <van-field
        class="vote_title"
        v-model="vote.voteTitle"
        rows="3"
        autosize
        type="textarea"
        maxlength="80"
        placeholder="输入标题,2-80字"
        show-word-limit
      />

      <!-- 选项 -->
      <div class="vote_content">
        <!-- 第一个选项 -->
        <ul class="vote_ul">
          <li class="chang_vote_li1"></li>
          <li class="chang_vote_li2">
            <input type="text" v-model="vote.option[0]" placeholder="选项1" />
          </li>
        </ul>
        <!-- 第二个选项 -->
        <ul class="vote_ul">
          <li class="chang_vote_li1"></li>
          <li class="chang_vote_li2">
            <input type="text" v-model="vote.option[1]" placeholder="选项2" />
          </li>
        </ul>

        <!-- 手动加入,可以剪掉-->
        <ul class="vote_ul" v-for="(iten,index) in number" :key="index">
          <li class="chang_vote_li1" @click.stop="reduce($event,index)">
            <div class="reduce">-</div>
          </li>
          <li class="chang_vote_li2">
            <input type="text" v-model="vote.option[index+2]" :placeholder="'选项'+Number(index+3)" />
          </li>
        </ul>
      </div>
      <!-- //增加 -->
      <ul class="vote_ul">
        <li class="chang_vote_li1" v-on:click="add($event)">
          <div class="add">+</div>
        </li>
        <li class="chang_vote_li2">
          <input type="text" placeholder="添加选项" readonly />
        </li>
      </ul>
    </div>

    <!-- <div class="explain" v-if="vote.option.length==10">
				 最多支持10个选项
			</div>
    -->

    <div class="voteType">
      <!-- 头片类型 -->
      <ul style="width:100vw;,height:300px;">
        <van-field
          v-model="vote.placeholder"
          is-link
          readonly
          name="picker"
          label="投票类型:"
          :placeholder="vote.placeholder"
          @click="vote.showPicker = true"
        />
        <van-popup :show="vote.showPicker" position="bottom">
          <van-picker
            :columns="vote.columns"
            @confirm="onConfirm"
            @cancel="vote.showPicker = false"
          />
        </van-popup>
      </ul>

      <!--  设置时间 -->
      <ul class="setDate">
        <van-cell title="选择日期区间" :close-on-click-overlay="true" :value="time" @click="show = true" />
        <van-calendar :show="show" type="range" @confirm="onConfirmData">
          <template #title>
            <div>
              <span>请选择投票日期</span>
              <van-icon name="cross" class="closeIcon" @click="closedate" />
            </div>
          </template>
        </van-calendar>
      </ul>
    </div>
  </div>
</template>

<script>
import myheader from '../../../comon/myheader.vue'
import { Notify } from 'vant'

export default {
  components: {
    myheader,
  },
  data() {
    return {
      number: 0, //增加的数量
      // 投票表
      time: '', // 时间字符传
      vote: {
        voteTitle: '',
        //选项的数组
        option: ['', ''],
        columns: ['单选', '双选', '多选'], // 投票的类型选择
        showPicker: false,
        placeholder: '单选',
      },

      startTime: '', // 开始时间
      endTime: '', // 结束时间
      show: false,
    }
  },

  methods: {
    //
    closedate() {
      this.show = false
    },
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
    },
    // 日历选择器 回调方法
    onConfirmData(values) {
      this.show = !this.show
      this.startTime = Date.parse(values[0])
      this.endTime = Date.parse(values[1])
      this.time = `${this.formatDate(values[0])} - ${this.formatDate(
        values[1]
      )}`

      // this.time = formatDateTime.formatDateTime5( Date.parse( values))
      console.log(this.endTime)
      console.log(this.startTime)
      // const [start, end] = values;
    },

    //减去选项方法
    reduce(e, index) {
      this.number = this.number - 1
      this.vote.option.splice(index + 2, 1)
    },
    //加选项的方法
    add(e) {
      if (this.number == 8) {
        return
      }
      this.number++
      this.vote.option.push('')
      let num = this.vote.option.length
    },
    // 发布投票
    async voteAdd() {
      if (this.time.length == 0) {
        Notify({ type: 'danger', message: '请选择时间' })
        return
      } else if (this.vote.voteTitle == '') {
        Notify({ type: 'danger', message: '请填写标题' })
        return
      } else {
        let selectType
        if ((this.vote.placeholder == '单选') | (this.vote.placeholder == '')) {
          selectType = 1
        } else if (this.vote.placeholder == '多选') {
          selectType = 0
        } else {
          selectType = 2
        }
        const res = await this.$axios.post('/vote/save', {
          type: selectType,
          title: this.vote.voteTitle,
          userId: this.$store.getters.getUserInfo.id,
          startTime: this.startTime,
          endTime: this.endTime,
          optionList: this.vote.option,
        })
        if (res.data.code == 200) {
          Notify({ type: 'success', message: '发起投票成功' })
          this.$router.push({ path: '/vote' })
        }
      }
    },
    // 获取投票选择的类型
    onConfirm(value) {
      this.vote.showPicker = false
      this.vote.placeholder = value
    },
  },
}
</script>

<style>
.el-popper {
  width: 100vw;
  overflow: scroll;
}
.voteAdd {
  background: #f1f1f1;
}

.vote_title {
  margin-top: 15px;
  color: #000;
  margin-top: 46px;
  font-size: 18px;
  padding: 15px;
}
textarea.van-field__control {
  margin-left: 90px;
}
.chang_vote_li1 {
  height: 100%;
  margin-right: 15px;
  text-align: center;
  font-size: 20px;
}

.vote_content {
  margin-top: 10px;
}
.vote_ul {
  align-items: center;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.chang_vote_li2 {
  border-bottom: #dddddd d 0.02667rem;
  box-sizing: border-box;
  border-bottom: 1px dashed #ccc;
  width: 269px;
}
.chang_vote_li2 > input {
  padding-left: 10px;
  height: 40px;
  font-size: 14px;
}
.add {
  height: 25px;
  background-color: #09a3d6;
  text-align: center;
  line-height: 25px;
  width: 25px;
  font-size: 25px;
  margin: auto;
  border-radius: 50%;
  color: #ffffff;
}
.reduce {
  height: 25px;
  background-color: #09a3d6;
  text-align: center;
  line-height: 25px;
  width: 25px;
  font-size: 25px;
  margin: auto;
  border-radius: 50%;
  color: #ffffff;
}
/* 选项说明 */
.explain {
  width: 100%;
  font-size: 14px;
  padding: 10px;
  color: #a1a1a1;
}
.voteType {
  background: #ffffff;
}

/* 投票类型选择 */
.voteType > ul {
  font-weight: normal;
  font-size: 16px;
  height: 45px;
  padding: 10px;
  box-sizing: border-box;
  border-bottom: #dddddd solid 1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 999;
}
.block {
  height: 40px;
  display: flex;
  align-items: center;
  /* border-top: #DDDDDD solid 1px ; */
  /* border-bottom:  #DDDDDD solid 1px; */
  box-sizing: border-box;
}
.el-input__inner {
  border: none;
  box-sizing: border-box;
}

/* 单选按钮 */
.vote_radio > .van-radio-group {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-items: space-between;
}
.vote_radio_div {
  height: 100%;
  flex: 1;
}
.van-radio {
  width: 50%;
}
.van-radio_2 {
  text-align: right;
  display: flex;
  justify-items: right;
}

/* 类型 */
.voteTpyeli {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
}
.closeIcon {
  position: absolute;
  top: 11px;
  right: 18px;
  font-size: 0.6rem;
  color: #ccc;
}
</style>
